<template>
  <div class="flex flex-col h-screen">
    <div class="main px-2 py-5 h-full overflow-y-auto">
      <!-- 好友申请 -->
      <div class="friends">
        <div class="friends-list flex items-center my-1">
          <div class="friends-list-l relative">
            <div
              class="tips absolute top-[-0.2rem] right-[-0.1rem] text-white bg-red-700 rounded-full w-2 h-2 flex items-center justify-center"
            >
              9
            </div>
            <img
              src="@/assets/message/apply.png"
              alt=""
              class="w-6 h-6 rounded bg-amber-200"
            />
          </div>
          <div class="friends-list-r flex-1 ml-1">
            <div class="top flex justify-between mb-1">
              <div class="name text-[0.4rem]">好友申请</div>
              <div class="time">13:33</div>
            </div>
            <div class="content text-gray-600">茫茫人海，相聚便是缘</div>
          </div>
        </div>
      </div>
      <!-- 好友列表 hook懒加载 -->
      <div
        class="friends"
        v-for="(item, index) in friendChatList"
        :key="item.id"
        :ref="(el) => (index === friendChatList.length - 1 ?(lastItemRef = el as HTMLElement) : '' )"
      >
        <div class="friends-list flex items-center my-1">
          <div class="friends-list-l relative">
            <div
              class="tips absolute top-[-0.2rem] right-[-0.1rem] text-white bg-red-700 rounded-full w-2 h-2 flex items-center justify-center"
            >
              {{ item.tip }}
            </div>
            <img
              :src="item.imgUrl"
              alt=""
              class="w-6 h-6 rounded bg-amber-200"
            />
          </div>
          <div class="friends-list-r flex-1 ml-1">
            <div class="top flex justify-between mb-1">
              <div class="name text-[0.4rem]">{{ item.name }}</div>
              <div class="time text-ellipsis">{{ item.time }}</div>
            </div>
            <div class="content text-gray-600">{{ item.news }}</div>
          </div>
        </div>
      </div>
      <div class="text-center" v-if="!hasMore">没有更多了</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs } from "vue";
import { useFriendChatStore } from "@/stores/friendChatStore";
import useIntersectionObserver from "@/hooks/useIntersectionObserver.ts";

const friendChatStore = useFriendChatStore();

const lastItemRef = ref<HTMLElement | null>(null);

console.log(lastItemRef);

onMounted(() => {
  friendChatStore.getFriendChatList(1, 6);
});

// 当前页码
const currentPage = ref(1);

// 加载下一页的函数
const handleNextPage = async (setHasMore: (value: boolean) => void) => {
  currentPage.value++;
  const res = await friendChatStore.getFriendChatList(currentPage.value, 6);
  if (!res.hasMore) {
    setHasMore(false);
  }
};

const { hasMore, setHasMore } = useIntersectionObserver(lastItemRef, () => {
  handleNextPage(setHasMore);
});

const { friendChatList } = toRefs(friendChatStore);
</script>
